<template>
    <div class="content-info">
        <h4>业务范围</h4>
        <a-form-model
            ref="dynamicValidateForm"
            :model="formMadel"
            :rules="formRules"
            layout="vertical"
        >
            <a-form-model-item
                prop="primaryBusinessType"
                label="请选择您公司的主营业务类别"
            >
                <a-radio-group v-model="formMadel.primaryBusinessType">
                    <a-radio-button
                        v-for="(item, i) in dataList"
                        :key="i"
                        :value="item.name"
                    >
                        {{ item.name }}
                    </a-radio-button>
                </a-radio-group>
            </a-form-model-item>
            <a-form-model-item prop="primaryBusiness">
                <span
                    slot="label"
                >请选择您公司的主营业务<font>(可多选, 最多10个)</font></span>
                <a-checkbox-group v-model="formMadel.primaryBusiness">
                    <a-checkbox
                        v-for="(item, i) in businessList"
                        :key="i"
                        :value="item"
                        :disabled="businessDisabled"
                    >
                        {{ item }}
                    </a-checkbox>
                </a-checkbox-group>
            </a-form-model-item>
            <a-form-model-item prop="expertiseDomain">
                <span
                    slot="label"
                >请选择您服务所擅长的领域<font>(可多选, 最多10个)</font></span>
                <a-checkbox-group v-model="formMadel.expertiseDomain">
                    <a-checkbox
                        v-for="(item, i) in expertiseTypeList"
                        :key="i"
                        :value="item"
                        :disabled="expertiseDomainDis"
                    >
                        {{ item }}
                    </a-checkbox>
                </a-checkbox-group>
            </a-form-model-item>
            <a-form-model-item prop="territory" label="请选择您服务的覆盖地域">
                <a-radio-group v-model="formMadel.territory">
                    <a-radio-button
                        v-for="(item, i) in coverageList"
                        :key="i"
                        :value="item"
                    >
                        {{ item }}
                    </a-radio-button>
                    <a-button class="editable-button" @click="InputShow">
                        其他,请输入...
                    </a-button>
                    <a-input
                        v-if="show"
                        class="editable-input"
                        placeholder="请输入"
                        :max-length="30"
                        v-model="inputVal"
                        @blur="handlePush()"
                    />
                </a-radio-group>
            </a-form-model-item>
        </a-form-model>
        <div class="btn">
            <a-button style="margin-left: 10px" @click="prev">
                上一步
            </a-button>
            <a-button
                type="primary"
                html-type="submit"
                @click="submitForm('dynamicValidateForm')"
            >
                下一步
            </a-button>
        </div>
    </div>
</template>

<script>
export default {
    name: '',
    props: {
        current: {
            type: Number,
            default: () => {
                return 0
            }
        },
        moduleList: {
            type: Array,
            default: () => {
                return []
            }
        }
    },
    data () {
        return {
            businessDisabled: false,
            expertiseDomainDis: false,
            show: false,
            inputVal: '',
            dataList: [],
            businessList: [],
            expertiseTypeList: [],
            coverageList: [],
            formMadel: {
                primaryBusinessType: '',
                primaryBusiness: [],
                expertiseDomain: [],
                territory: ''
            },
            formRules: {
                primaryBusinessType: [
                    {
                        required: true,
                        message: '请选择您公司的主营业务类别',
                        trigger: 'change'
                    }
                ],
                primaryBusiness: [
                    {
                        required: true,
                        message: '请选择您公司的主营业务',
                        trigger: 'change'
                    }
                ],
                expertiseDomain: [
                    {
                        required: true,
                        message: '请选择您服务所擅长的领域',
                        trigger: 'change'
                    }
                ],
                territory: [
                    {
                        required: true,
                        message: '请选择您服务的覆盖地域',
                        trigger: 'change'
                    }
                ]
            }
        }
    },
    watch: {
        moduleList (val) {
            if (val.length) {
                this.$nextTick(() => {
                    val.forEach((item) => {
                        if (item.key === 'territory') {
                            this.coverageList = item.dictList.map((sb) => {
                                return sb.name
                            })
                        }
                    })
                })
            }
        },
        'formMadel.primaryBusinessType' (val) {
            if (val) {
                this.dataList.forEach((item) => {
                    if (item.name === val && item.children) {
                        this.businessList = item.children
                            .filter(item => item.status)
                            .map((sb) => {
                                return sb.name
                            })
                    }
                })
            }
        },
        'formMadel.primaryBusiness' (val) {
            if (val.length) {
                if (val.length > 9) {
                    this.businessDisabled = true
                } else {
                    this.businessDisabled = false
                    const list = []
                    this.dataList.forEach((item) => {
                        if (item.children && item.children.length) {
                            item.children.forEach((su) => {
                                val.forEach((it) => {
                                    if (it === su.name && su.children) {
                                        list.push(...su.children)
                                    }
                                })
                            })
                        }
                    })
                    this.expertiseTypeList = list
                        .filter(item => item.status)
                        .map((sb) => {
                            return sb.name
                        })
                }
            }
        },
        'formMadel.expertiseDomain' (val) {
            if (val.length > 10) {
                this.expertiseDomainDis = true
            } else {
                this.expertiseDomainDis = false
            }
        }
    },
    async mounted () {
        const res = await this.$ApiServer['company/tree']()
        if (res.code === 200) {
            this.dataList = res.data.filter(item => item.status)
            const list2 = res.data.filter(
                item => item.status && item.children
            )
            this.businessList = list2[0].children
                .filter(item => item.status)
                .map((sb) => {
                    return sb.name
                })
            const list3 = this.dataList[0].children.filter(
                item => item.status && item.children
            )
            this.expertiseTypeList = list3[0].children
                .filter(item => item.status)
                .map((sb) => {
                    return sb.name
                })
        }
        const resut = await this.$ApiServer['company/kind']()
        if (resut.code === 200 && resut.data) {
            const {
                primaryBusinessType,
                primaryBusiness,
                expertiseDomain,
                territory
            } = resut.data
            this.formMadel.primaryBusinessType = primaryBusinessType
                ? JSON.parse(primaryBusinessType).join(',')
                : ''
            this.formMadel.primaryBusiness = primaryBusiness
                ? JSON.parse(primaryBusiness)
                : []
            this.formMadel.expertiseDomain = expertiseDomain
                ? JSON.parse(expertiseDomain)
                : []
            this.formMadel.territory = territory
                ? JSON.parse(territory).join(',')
                : ''
        }
    },
    methods: {
        InputShow () {
            this.show = !this.show
        },
        handlePush () {
            this.$nextTick(() => {
                if (this.inputVal) {
                    let flag = true
                    this.coverageList.forEach((sub) => {
                        if (sub === this.inputVal) {
                            flag = false
                            return this.$message.error('选项已存在')
                        }
                    })
                    if (flag) {
                        this.coverageList.push(this.inputVal)
                        this.inputVal = ''
                        this.show = false
                    }
                } else {
                    return this.$message.warning('请输入选项')
                }
            })
        },
        prev () {
            this.$emit('prev', this.current)
        },
        submitForm (formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    const formData = JSON.parse(JSON.stringify(this.formMadel))
                    for (const key in formData) {
                        if (
                            Object.prototype.toString.call(formData[key]) ===
                            '[object String]'
                        ) {
                            formData[key] = formData[key].split(',')
                        }
                    }
                    const res = await this.$ApiServer['company/srueStep']({
                        step: this.current + 1,
                        ...formData
                    })
                    if (res.code === 200) {
                        this.$emit('next', this.current)
                    } else {
                        this.$message.error(res.message)
                    }
                } else {
                    return false
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
.content-info {
    margin-top: 0.3rem;
    min-height: 4.75rem;
    h4 {
        font-weight: bold;
        color: @primary-color;
        font-size: 0.16rem;
        position: relative;
        padding-left: 0.14rem;
        &::before {
            content: '';
            display: inline-block;
            width: 0.04rem;
            height: 0.16rem;
            background-color: @primary-color;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
        }
    }
    .btn {
        display: flex;
        justify-content: flex-end;
        padding-right: 0.2rem;
        margin-top: 0.8rem;
        button + button {
            margin-left: 0.2rem;
        }
    }
}

.ant-form {
    padding: 0.26rem 1rem 0 0.6rem;
    ::v-deep {
        .ant-form-item-label {
            .ant-form-item-required {
                &::before {
                    margin-right: 0;
                }
            }
            span {
                font-size: 0.14rem;
                color: #2a2a2a;
                word-spacing: 0;
                font {
                    font-size: 0.12rem;
                    color: #999999;
                }
            }
        }
        .ant-radio-group {
            display: flex;
            flex-wrap: wrap;
            .ant-radio-button-wrapper {
                height: 0.36rem;
                background: #e9e9e9;
                border: none;
                display: flex;
                justify-content: center;
                color: #2a2a2a;
                font-size: 0.14rem;
                border-radius: 4px;
                margin-right: 0.2rem;
                margin-bottom: 0.1rem;
                padding: 0 0.3rem;
                span {
                    color: #2a2a2a;
                    line-height: 1.1;
                    display: flex;
                    align-items: center;
                }
                &.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
                    box-shadow: none;
                    border: 1px solid @primary-color;
                    background-color: rgba(197, 53, 53, 0.15);
                    color: #2a2a2a;
                    border: 1px solid #fd5454;
                    &::before {
                        display: none;
                    }
                }
                & + .ant-radio-button-wrapper {
                    margin-left: 0;
                    &::before {
                        display: none;
                    }
                }
            }
        }
        .ant-checkbox-group {
            display: flex;
            flex-wrap: wrap;
            .ant-checkbox-wrapper {
                display: flex;
                justify-content: center;
                height: 0.36rem;
                background: #e9e9e9;
                border: none;
                color: #2a2a2a;
                font-size: 0.14rem;
                border-radius: 4px;
                margin-right: 0.2rem;
                margin-bottom: 0.1rem;
                padding: 0 0.3rem;
                span {
                    display: flex;
                    align-items: center;
                    line-height: 1.1;
                    padding: 0;
                }
                &.ant-checkbox-wrapper-checked {
                    box-shadow: none;
                    border: 1px solid @primary-color;
                    background-color: rgba(197, 53, 53, 0.15);
                    color: #2a2a2a;
                    border: 1px solid #fd5454;
                }
                & + .ant-checkbox-wrapper {
                    margin-left: 0;
                }
                .ant-checkbox {
                    display: none;
                }
            }
        }
        .ant-form-item-children {
            display: flex;
            flex-wrap: wrap;
            .editable {
                &-button {
                    width: 100px;
                    height: 0.36rem;
                    background: #e9e9e9;
                    border: none;
                    padding: 0;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    color: #2a2a2a;
                    border-radius: 4px;
                    margin-top: 0;
                    margin-right: 0.2rem;
                }
                &-input {
                    width: 1.5rem;
                    height: 0.36rem;
                    color: #2a2a2a;
                    border-radius: 4px;
                    margin-top: 0;
                }
            }
        }
    }
}
</style>
